<!-- 综合运用组件的属性(计算属性与存储属性)和方法,动态渲染以及vue指令(:指定id或者class @调用绑定方法 ) -->
<!-- 积累css与html基础 -->
<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <!-- 是页面自适应大小 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>regist</title>
    <style>
        /* 类选择器 */
        .container {
            /* 边距 */
            margin: 0 auto;
            margin-top: 70px;
            /* 居中 */
            text-align: center;
            width: 300px;
        }

        .sub_title {
            color: grey;
            font-size: 15px;
        }

        .title {
            font-size: 40px;
        }

        .input {
            width: 90%;
        }

        .input_container {
            /* 左对齐 */
            text-align: left;
            margin-bottom: 20px;
        }

        .subContainer {
            text-align: left;
        }

        .field {
            font-size: 14px;
        }

        .input {
            /* 边框描边与风格 很重要瞬间就不呆板了 */
            border-radius: 6px;
            border-style: dashed;
            height: 25px;
            margin-top: 10px;
            background-color: gainsboro;
        }

        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }

        .setting {
            font-size: 9px;
            color: black;
        }

        .checkbox {
            height: 20px;
            /* 让checkbox in line */
            vertical-align: middle;
        }

        .btn {
            height: 40px;
            width: 300px;
            border-radius: 10px;
            border-style: ridge;
            margin-top: 30px;
            background-color: black;
            border-color: darkblue;
            color: white;
        }
    </style>
</head>

<body>
    <div id="myapp">
        <div class="container">
            <div class="sub_title">加入 leyi_media 即刻共享</div>
            <h1 class="title">注册账号</h1>
            <div v-for="(item, index) in fields" class="input_container">
                <div class="field">
                    <!-- 动态渲染一行的内容以及元素属性 每个盒子都用class归类-->
                    <!-- v-model 也动态绑定Vue示例里的值 -->
                    {{item.title}}<span v-if="item.required" style="color: red;">*</span>
                    <input class="input" :type="item.type" v-model.tirm="item.value" :id="item.id">
                    <div class="tip" v-if="index== 2">请确认密码长度需要大于6位</div>
                </div>
            </div>
            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input class="checkbox" type="checkbox" v-model="check_box">
                <label class="label">收受更新邮件</label>
                <p>{{file}}</p>
            </div>
            <button class="btn" @click="create_account">创建账号</button>
        </div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                // 动态渲染列表
                fields: [{
                    id: "name",
                    title: "用户名",
                    required: true,
                    type: "text",
                    value: "",
                }, {
                    id: "email",
                    title: "邮箱",
                    required: false,
                    type: "text",
                    value: "",

                }, {
                    id: "password",
                    title: "密码",
                    required: true,
                    type: "password",
                    value: "",
                },
                {
                    id: "file",
                    title: "文件",
                    required: true,
                    type: "file",
                    value: "",
                }
                ],
                check_box: false,
            }
        },
        computed: {
            // 巧用计算属性(对依赖属性的重载读写方法)
            name: {
                get() {
                    return this.fields[0].value;
                },
                set(new_value) {
                    this.fields[0].value = new_value;
                }
            },
            email: {
                get() {
                    return this.fields[1].value;
                },
                set(new_value) {
                    this.fields[1].value = new_value;
                }
            },
            password: {
                get() {
                    return this.fields[2].value;
                },
                set(new_value) {
                    this.fields[2].value = new_value;
                }
            },
            file: {
                get() {
                    if (document.getElementById('name').value) return 1;
                    return 2;
                }

            }
        },
        methods: {
            create_account() {
                if (this.name.length == 0) {
                    alert("用户名不允许为空!");
                    return;
                }
                if (cheack_email(this.email) == false) {
                    alert("邮箱格式不正确!");
                    return;
                }
                // 与后端交互 Ajax 或者 vue-axios
                alert("注册成功!");
            },
        }
    }
    function cheack_email(email) {
        if (email.length == 0) return true;
        var verify = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
        if (!verify.test(email)) {
            return false;
        }
        return true;
    };
    let instance = Vue.createApp(app).mount("#myapp");
</script>